<template>
  <div class="svgLineClass">
    <svg version="1.1" width="10px" height="70px" preserveAspectRatio="xMidYMin meet" viewBox="709 202  8 94">
      <path d="M 713.5 202  L 713.5 290  " stroke-width="1" stroke="#aeb5bf" fill="none"/>
      <path d="M 718.146446609407 284.946446609407  L 713.5 289.592893218814  L 708.853553390593 284.946446609407  L 708.146446609407 285.653553390593  L 713.146446609407 290.653553390593  L 713.5 291.007106781187  L 713.853553390593 290.653553390593  L 718.853553390593 285.653553390593  L 718.146446609407 284.946446609407  Z " fill-rule="nonzero" fill="#aeb5bf" stroke="none"/>
    </svg>
    <add class="addClass" v-show="showAddBtn" @click="addClick" />
  </div>
</template>

<script setup>
import add from "../add/index.vue";
const props = defineProps({
  showAddBtn: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(["addList"]);
const addClick = () => {
  emit("addList");
}
</script>

<style lang="scss" scoped>
.svgLineClass {
  position: relative;
  height: 70px;
  .addClass {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }
}
</style>